<template>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-button type="primary" size="small" @click="getValue">提 交</el-button>
      <!-- <el-button type="primary" size="small" @click="pre">上一个主题</el-button> -->
      <!-- <el-button type="primary" size="small" @click="next">下一个主题</el-button> -->
      <el-button type="primary" size="small" @click="content = ''">重置</el-button>
      <el-button type="primary" size="small" >
        <router-link to="/user/traning">去练习</router-link>
      </el-button>
      <!-- <router-link to="/user/traning" tag='h1'>练习</router-link> -->
    </div>
    <div style="display: flex; flex-direction: row; align-items: center">
      <div style="display: inline-block; width: 50%">
        <editor
          ref="aceEditor"
          v-model="content"
          @init="editorInit"
          width="100%"
          height="600"
          lang="html"
          :theme="theme"
          :options="{
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true,
            tabSize: 6,
            fontSize: 14,
            showPrintMargin: false //去除编辑器里的竖线
          }"
        />
      </div>

      <div style="width: 50%; display: inline-block; height: 600px">
        <el-container>
          <el-container>
            <el-main
              style="
                position: relative;
                padding: 0;
                background: #eeeeee;
                height: 600px;
                overflow-y: scroll;
                border: 1px solid #dfdfdf;
              "
            >
              <pre><div v-html="result"></div></pre>
            </el-main>
          </el-container>
        </el-container>
      </div>
    </div>

    <!-- <el-dialog title="编辑结果" :visible.sync="isVisible"  width="500px" :close-on-click-modal="false" :show-close="false">
      <div v-html="content"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isVisible = false">取 消</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { _axiosPost } from '@/utils/axios-request'
// import Editor from 'vue2-ace-editor'
@Component({
  name: 'Details',
  components: {
    // Editor
    editor: require('vue2-ace-editor')
  }
})
export default class extends Vue {
  // private isVisible = false
  private dialogVisible = false;
  private content = '';
  private result = '';
  private theme = '';
  private num = 0;
  private arr = [
    // 将brace/theme文件夹下的所有主题名字拷贝出来
    'chaos',
    'vibrant_ink',
    'ambiance',
    'chrome',
    'clouds',
    'clouds_midnight',
    'cobalt',
    'crimson_editor',
    'dawn',
    'dracula',
    'dreamweaver',
    'eclipse',
    'github',
    'gob',
    'gruvbox',
    'idle_fingers',
    'iplastic',
    'katzenmilch',
    'kr_theme',
    'kuroir',
    'merbivore',
    'merbivore_soft',
    'monokai',
    'mono_industrial',
    'pastel_on_dark',
    'solarized_dark',
    'solarized_light',
    'sqlserver',
    'terminal',
    'textmate',
    'tomorrow',
    'tomorrow_night',
    'tomorrow_night_blue',
    'tomorrow_night_bright',
    'tomorrow_night_eighties',
    'twilight',
    'xcode'
  ];

  private editorInit() {
    // 初始化
    require('brace/ext/language_tools') // language extension prerequsite...
    require('brace/mode/javascript') // language
    // require("brace/theme/tomorrow_night");
    for (let i = 0; i < this.arr.length; i++) {
      // 方便看哪个主题好看，循坏加载了所有主题，通过点击按钮切换
      require('brace/theme/' + this.arr[i])
    }
    require('brace/snippets/javascript') // snippet
  }

  private getValue() {
    // this.isVisible = true
    _axiosPost('/api/admin/traininglevels/editCode', {
      content: this.content
    }).then((res: any) => {
      console.log('res', res)
      this.result = res
    })

    // 获取编辑器中的值
    // console.log("编辑器中的值：" + this.$refs.aceEditor.editor.getValue());
    // console.log(
    //   "编辑器中第一个换行符的位置：" +
    //     this.$refs.aceEditor.editor.getValue().indexOf("\n")
    // );
  }

  private pre() {
    // 切换到上一个主题
    if (this.num === 0) {
      return
    }
    this.num--
    this.theme = this.arr[this.num]
    console.log('主题' + this.num + '__' + this.arr[this.num])
  }

  private next() {
    // 切换到下一个主题
    if (this.num === this.arr.length - 1) {
      return
    }
    this.num++
    this.theme = this.arr[this.num]
    console.log('主题' + this.num + '__' + this.arr[this.num])
  }

  mounted() {
    this.editorInit()
    this.theme = this.arr[0]
    // console.log(this.$refs.aceEditor.editor.setValue('设置的初始值'))
  }
}
</script>

<style scoped>
.codeEditBox {
  /* width: 100%; */
  height: 200px;
  border: 1px solid #dcdee2;
}
</style>
